<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
        <title>Document</title>
    </head>
    <body>
        <!-- 虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么
         Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化
         时执行异步或开销较大的操作时，这个方式是最有用的。 -->

        <div id="watch-example">
            <p>
                Ask a yes/no question:
                <input v-model="question" />
            </p>
            <p>{{ answer }}</p>
        </div>

        <script>
            var watchExampleVM = new Vue({
                el: '#watch-example',
                data: {
                    question: '',
                    answer: 'I cannot give you an answer until you ask a question!',
                },
                watch: {
                    // 如果 `question` 发生改变，这个函数就会运行
                    question: function(newQuestion, oldQuestion) {
                        this.answer = 'Waiting for you to stop typing...';
                        this.debouncedGetAnswer();
                    },
                },
                created: function() {
                    // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
                    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
                    // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
                    // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
                    // 请参考：https://lodash.com/docs#debounce
                    this.debouncedGetAnswer = _.debounce(this.getAnswer, 500);
                },
                methods: {
                    getAnswer: function() {
                        if (this.question.indexOf('?') === -1) {
                            this.answer = '问题需要包含符号\'?\'';
                            return;
                        }
                        this.answer = 'Thinking...';
                        var vm = this;
                        axios
                            .get('https://yesno.wtf/api')
                            .then(function(response) {
                                vm.answer = _.capitalize(response.data.answer);
                            })
                            .catch(function(error) {
                                vm.answer = 'Error! Could not reach the API. ' + error;
                            });
                    },
                },
            });
        </script>
    </body>
</html>
